<template>
    <div class="home-hot">
        <HomePanel
            :GoodsList="HotGoodsList"
            panelName="热门推荐"
            @updateList="updateList"
        ></HomePanel>
    </div>
</template>

<script setup>
import { homeStore } from '@/stores/home'
import HomePanel from './home-panel.vue'
import { computed, reactive, watch } from 'vue'
import { changeRecommend } from '@/hooks/home'
const useHomeStore = homeStore()
const homeLikeGoods = computed(() => useHomeStore.hotLikeGoods)
// like商品
const HotGoodsList = reactive([])
watch(
    homeLikeGoods,
    (newVal, oldVal) => {
        changeRecommend(newVal, HotGoodsList, 0, 40)
    },
    { immediate: true }
)

// 更新数剧
const updateList = () => {
    changeRecommend(homeLikeGoods.value, HotGoodsList, 0, 40)
}
</script>

<style lang="scss" scoped>
.home-hot {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
